icon-size = 32px
icon-gap = 25px

article
  position relative
  overflow hidden
  background #fff
  box-shadow 0 2px 6px rgba(100, 100, 100, 0.3)
  margin-bottom 20px
  padding 30px

  @media screen and (max-width: 820px)
    padding 15px
    margin 8px 8px 15px 8px

  .post-content
    position relative

  header
    time
      color color-meta
      font 0.8em font-title
      margin-top 10px
      display block
      line-height 1

    .title
      font-weight bold
      font-size 1.6em
      font-family Microsoft YaHei, SimSun;
      a
        &:hover
          text-decoration underline

      @media screen and (max-width: 820px)
        font-weight normal
        font-size: 1.4em

  .entry
    line-height 1.9

    @media screen and (max-width: 820px)
      line-height 1.5

    p, blockquote, ul, ol, dl, table, iframe, h3, h4, h5, h6, .video-container
      margin-top 15px

    blockquote
      margin 10px 0
      padding 8px 10px 8px 12px
      border-left 5px solid #CCC
      background #F1F1F1
      p
        margin-top: 0

    code, pre
      font-family font-mono
      font-size 0.8em
      line-height 1.3

    code
      background #eee
      color #666
      padding 0 5px
      margin 0 2px
      border 1px solid color-border
      border-radius 3px

    pre
      background #eee
      border 1px solid color-border
      margin-top 15px
      overflow auto
      padding 7px 15px
      border-radius 2px
      code
        background none
        padding 0
        margin 0
        border none
        border-radius 0

    ul, ol, dl
      margin-left 20px
      ul, ol, dl
        margin-top 0

    h1, h2
      font-weight normal
      border-bottom 1px solid color-border
      padding-bottom 10px
      margin-top 20px

    h3, h4, h5, h6
      font-weight normal

    h3
      font-size 1.1em
      font-weight bold
      color #555
      border-bottom 1px dotted #ccc
      padding 0 0 5px 0

    img, video
      max-width 100%
      height auto
      border none

    iframe
      border none

    hr
      margin 15px 0
      border none
      border-bottom 1px dotted #ccc

    .caption
      display block
      margin-top 5px
      color color-meta
      position relative
      font-size 0.9em
      padding-left 25px
      &:before
        content '\f040'
        position absolute
        font 1.3em font-icon
        position absolute
        left 0
        top 3px

    .video-container
      position relative
      padding-bottom 56.25%
      padding-top 30px
      height 0
      overflow hidden
      iframe, object, embed
        position absolute
        top 0
        left 0
        width 100%
        height 100%
        margin-top 0

    .pullquote
      float right
      border none
      padding 0
      margin 1em 0 0.5em 1.5em
      text-align left
      width 45%
      font-size 1.5em

  footer
    margin-top 15px
    padding-top 10px
    color color-meta
    font-size 0.9em
    line-height 16px
    position relative
    min-height 16px
    a
      color color-meta
      &:hover
        color #333
      &:before
        font 1.1em font-icon
        padding-right 10px
        vertical-align middle

    .categories, .tags
      position relative
      margin 5px 0

#page header .title
  margin-bottom 30px